<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<fmt:message key="titulo.cadastro" var="title">
    <fmt:param>
        <fmt:message key="titulo.delegacia" />
    </fmt:param>
</fmt:message>
<%@ include file="/WEB-INF/jsp/includes/topo.jspf" %>

<script type="text/javascript">

	$(function() {
		var estadoSelect = $('#estadoSelect');
		popularMunicipios(estadoSelect);
		
		estadoSelect.on('change', function(){
			popularMunicipios(estadoSelect);
		});
		
	});
	
	function desabilitarMunicipio(municipioSelect) {
		var options = [];
		options.push(' <option>Selecione..</option> '); // colocando a primeira option...
		municipioSelect.html(options.join('')).prop('disabled', 'disabled');
	}
	
	function popularMunicipios(estadoSelect) {
		var municipioSelect = $('#municipioSelect');
		var selecionado = estadoSelect.val(); // pega o ID do estado
	      if(selecionado != '') {
		      $.ajax({
		         url:'/sisp-sicrim/pages/municipio/lista/' + selecionado,
		         dataType:'json', // O Server vai retornar um JSON
		         success:function(data){
		            // Precisa transformar de json para objeto html
		            var options = [];
		            options.push(' <option>Selecione..</option> '); // colocando a primeira option...
		            for (var i = 0; i < data.length; i++) {
		            	var sel = (${entidade.municipio != null ? entidade.municipio.id : 0} == data[i].id);
		               options.push('<option value="'+ data[i].id + '"' + (sel ? 'selected' : '') + '>' + data[i].descricao + '</option>');
		            }
		            // Agora precisa juntar esses options dentro da combo de cidades
		            municipioSelect.html(options.join('')).prop('disabled', false);
		         }
		      });
	      }
	      else {
	    	  desabilitarMunicipio(municipioSelect);
	      }
	}

</script>

<form action="${path}/pages/delegacia/salvar" method="POST" class="formCadastro">
    
    <c:if test="${not empty entidade.id}">
        <input type="hidden" name="_method" value="PUT"/>
        <label><fmt:message key='campo.id' /></label>
        <input type="text" name="entidade.id" value="${entidade.id}" readonly="readonly" />
    </c:if>
    
    <label><fmt:message key='campo.nome' /></label>
    <div class="linha">
    	<input type="text" name="entidade.nome" value="${entidade.nome}"
   	    class="${mapErrors['nome'] != null ? 'inputError' : ''}" title="${mapErrors['nome'] != null ? mapErrors['nome'] : ''}"/>
	    <img alt="asterisco" src="${path}/resources/imgs/asterisco.png" />
    </div>

    <label><fmt:message key='campo.nmDelegadoResp' /></label>
   	<input type="text" name="entidade.nmDelegadoResp" value="${entidade.nmDelegadoResp}"/>
    
    <label><fmt:message key='campo.estado' /></label>
    <div class="linha">
	    <select id="estadoSelect">
			<option value=""><fmt:message key='campo.selecione' /></option>
	        <c:forEach items="${estadoList}" var="estado">    
	            <option value="${estado.id}" ${entidade.municipio.estado.id == estado.id ? 'selected' : ''}>${estado.descricao}</option>    
	        </c:forEach>
	    </select>
	    <img alt="asterisco" src="${path}/resources/imgs/asterisco.png" />
    </div>
    
    <label><fmt:message key='campo.municipio' /></label>
    <div class="linha">
	    <select id="municipioSelect" name="entidade.municipio">
			<option value=""><fmt:message key='campo.selecione' /></option>
	    </select>
	    <img alt="asterisco" src="${path}/resources/imgs/asterisco.png" />
    </div>
    
    <div class="actions">
        <input type="submit" value="<fmt:message key='acao.salvar' />" />
        <input type="button" value="<fmt:message key='acao.limpar' />" onclick="javascript:window.location.assign('${path}/pages/delegacia/novo')" />
        <input type="button" value="<fmt:message key='acao.pesquisar' />" onclick="javascript:window.location.assign('${path}/pages/delegacia')" />
    </div>
</form>
<%@ include file="/WEB-INF/jsp/includes/rodape.jspf" %>